<template>
  <div class="videoPlayer" @click="click">
    <video class="video" :id="videoId"
      muted
      loop="loop"
      controls
    >
    <source :src="video.src"  type = 'video/mp4'>
  </video>
  </div>
  
</template>

<script>
export default {
  name: 'VideoPlayer',
  props: ['video'],
  data(){
    return {
     videoId: "video"+this.video.id,
    }
  },
  computed:{
  },
  created(){
    
  },
  mounted(){
  },
  methods: {
    click(){
      console.log('video click');
    },
    playVideo(url){
      let video = document.getElementById(this.videoId)
      video.src=url;
      video.load();
      video.play();
    }
  }
}
</script>
<style>
.videoPlayer {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: black;
  /* display: none; */
}
.video {
  width: 100%;
  height: 100%;
  /* background-color: red; */
  object-fit: fill;
}
</style>
